import 'package:flutter/material.dart';
import 'package:loxen/mode/inspiration/category_mode.dart';
import 'package:loxen/mode/inspiration/sub_category.dart';
import 'package:loxen/viewmode/inspiration_list_viewmodel.dart';
import 'package:provider/provider.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class InspirationTabBar extends StatefulWidget {
  @override
  _InspirationTabBarState createState() => _InspirationTabBarState();
}

class _InspirationTabBarState extends State<InspirationTabBar>
    with TickerProviderStateMixin {
  TabController controller;
  List<Category> data;

  @override
  void initState() {
    data = Provider.of<InspirationListViewModel>(context, listen: false)
        .categoryBean
        .data
        .results;
    controller = TabController(length: data?.length ?? 0, vsync: this);
    controller.index =
        Provider.of<InspirationListViewModel>(context, listen: false)
            .currentCategory;
    controller.addListener(() {
      Provider.of<InspirationListViewModel>(context, listen: false)
          .changeCategory(controller.index);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return TabBar(
      controller: controller,
      isScrollable: true,
      indicator: const BoxDecoration(),
      labelPadding: EdgeInsets.only(right: 20.w,left: 20.w),
      labelColor: Colors.white,
      labelStyle: TextStyle(
        fontSize: 34.sp,
        fontWeight: FontWeight.bold,
      ),
      unselectedLabelStyle: TextStyle(fontSize: 31.sp, color: Colors.white),
      tabs: data.map<Tab>((Category tab) {
        return Tab(
          text: tab.name,
        );
      }).toList(),
    );
  }
}

class InspirationTabBar2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Selector<InspirationListViewModel, List<SubCategory>>(
        builder: (_, value, __) {
          if (value != null) {
            return Container(
              height: 40.h,
              width: double.infinity,
              child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: value.length,
                  itemBuilder: (context, index) {
                    return Selector<InspirationListViewModel, int>(
                      builder: (_, currentIndex, __) {
                        bool select = index == currentIndex;
                        return GestureDetector(
                          onTap: () {
                            Provider.of<InspirationListViewModel>(context,
                                    listen: false)
                                .changeCategoryId(index);
                          },
                          child: Container(
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(4),
                                border: Border.all(
                                    color: select
                                        ? Color(0xFF0CABCB)
                                        : Color(0xFF999999),
                                    width: 0.5),
                              ),
                              margin: EdgeInsets.only(right: 26.w),
                              padding: EdgeInsets.only(right: 16.w, left: 16.w),
                              alignment: Alignment.center,
                              child: Text(
                                value[index].name,
                                style: TextStyle(
                                  color: select
                                      ? Color(0xFF0CABCB)
                                      : Color(0xFF999999),
                                  fontSize: 23.sp,
                                  fontWeight: FontWeight.w500,
                                  height: 1,
                                ),
                              )),
                        );
                      },
                      selector: (_, model) => model.currentCategoryId,
                      shouldRebuild: (old, next) =>
                          (old == index || next == index),
                    );
                  }),
            );
          } else {
            return Container(height: 40.h);
          }
        },
        selector: (_, model) => model
            .categoryBean.data.results[model.currentCategory].sub_category);
  }
}
